<template>
  <view>
	  <view class="homeHead">
	  	<!-- 首页轮播图 -->
	  	<swiper class="swiper_content" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" circular="true">
	  		<swiper-item v-for="item in swiperList" :key="item.image_id" >
	  			<view class="swiper-item">
	  					<image :src="item.image_src"></image>
	  				</view>
	  		</swiper-item>
	  	</swiper>
		<!-- /首页轮播图 -->
	  	<!-- 搜索 -->
	  	<my-search class="homeSearch"></my-search>
	  	<!-- /搜索 -->
	  </view>
	  <!-- 导航栏工具 -->
	  <view class="navigationTools">
	  	<view class="navigation1">
	  		<view class="navigation1_item" @click="gotoXinfang">
	  			<image src="../../static/page-image/new.png" alt="">
				<view class="text">新房</view>
	  		</view>
			<view class="navigation1_item" @click="gotoershouhouse">
				<image src="../../static/page-image/pre-house.png" alt="">
				<view class="text">二手房</view>
			</view>
			<view class="navigation1_item" @click="gotozufang">
				<image src="../../static/page-image/reating.png" alt="">
				<view class="text">租房</view>
			</view>
			<view class="navigation1_item">
				<image src="../../static/page-image/shops.png" alt="">
				<view class="text">商铺写字楼</view>
			</view>
			<view class="navigation1_item" @click="gotooldstuff">
				<image src="../../static/page-image/pre-goods.png" alt="">
				<view class="text">旧物</view>
			</view>
	  	</view>
		<navigation-tools class="navigation2"></navigation-tools>
	  </view>
	  <!-- /导航栏工具 -->
	<!-- 房屋列表 -->
	<view class="houselist-content">
		<view class="houselist-head">
			<view v-for="(item,index) in housestyle" class="househead-item" :class="{selectH:selecthouse==index}" @click="onclicSelect(index)" :key="index">
				{{item}}
			</view>
		</view>
		<!-- 房屋信息列表 -->
		<view class="houselist">
			<view class="houselist-item" @click="gotodetail(selecthouse,item)" v-for="(item,index) in homeListData" :key="index">
				<home-houselist :itemdata="item" :selecthouse="selecthouse"></home-houselist>
			</view>
		</view>
		<!-- 房屋信息列表 -->
	</view>
	<!-- /房屋列表 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        //轮播图片
		swiperList:[
			{
				image_id:1,
				image_src:"https://img0.baidu.com/it/u=954195707,1675392486&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697994000&t=e27357d453dd73c3f91ff4e968204795"
			},
			{
				image_id:2,
				image_src:"https://img1.baidu.com/it/u=1416771736,3481686012&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1697994000&t=2dac810d16a92b90732964ed8fb86969"
			}
		],
		// 房屋类型
		housestyle:["新房","二手房","租房"],
		// 默认选择类型
		selecthouse:0,
		// 房屋列表信息
		homeListData:[],
      }  
    },
	onLoad() {
		this.onclicSelect(0)
		
	},
	methods:{
		// 点击新房导航栏
		gotoXinfang(){
			uni.navigateTo({
				url:'/subpages/newhouse-list/newhouse-list'
			})
		},
		gotoershouhouse(){
			uni.navigateTo({
				url:'/subpages/ershouhouse/ershouhouse'
			})
		},
		gotozufang(){
			uni.navigateTo({
				url:'/subpages/zufang/zufang'
			})
		},
		// 点击旧物
		gotooldstuff(){
			uni.navigateTo({
				url:"/subpages/oldstuff/oldstuff"
			})
		},
		onclicSelect(val){
			this.selecthouse=val
			if(val=="0"){//新房
					this.getNewHouseData();
				  }else if(val=="1"){//二手房
					  this.getErshouHouseData();
				  }else{//租房
					  this.getZufangData();
			}
		},
		// 首先点击房屋信息列表跳转详情
		gotodetail(num,cur_item){
			if(num=="0"){//跳转新房详情
			uni.navigateTo({
				url:'/subpages/newhouse-details/newhouse-details?id='+cur_item.id
			})
				
			}else if(num=="1"){//跳转二手房房详情
			uni.navigateTo({
				url:"/subpages/ershouhouse-details/ershouhouse-details?id="+cur_item.id
			})
				
			}else if(num=="2"){//跳转租房房详情
				uni.navigateTo({
					url:"/subpages/zuhouse-details/zuhouse-details?id="+cur_item.id
				})
			}
		},
		// 请求新房推荐数据
		async getNewHouseData(){
			const {data:res}=await uni.$http.get('/building/page',{pageNo:1,pageSize:50,recommend:true,new:true});
			this.homeListData=res.data.records
			console.log("打印新房信息",this.homeListData)
		},
		// 请求二手房推荐数据
		async getErshouHouseData(){
			const {data:res}=await uni.$http.get('/house/page',{pageNo:1,pageSize:50,status:2,recommend:true});
			this.homeListData=res.data.records
			console.log("打印二手房信息",this.homeListData)
		},
		// 请求租房推荐数据
		async getZufangData(){
			const {data:res}=await uni.$http.get('/rental/page',{pageNo:1,pageSize:50,status:2,recommend:true});
			this.homeListData=res.data.records
			console.log("打印租房信息",this.homeListData)
		}
	}
  }
</script>

<style lang="scss">
	.homeHead{
    width: 750rpx;
		position: relative;
		.swiper_content{
			width: 100%;
			height: 280rpx;
			.swiper-item, image{
				width: 100%;
				height: 100%;
			}
		}
		.homeSearch{
			position: absolute;
			width: 100%;
			bottom: -50rpx;
		}
	}
	.navigationTools{
		padding: 0 5%;
		.navigation1{
			width: 100%;
			background-color: #fff;
			padding: 10rpx 0;
			margin-top: 100rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.navigation1_item{
				width: 20%;
				font-size: 25rpx;
				text-align: center;
				image{
					width: 100rpx;
					height: 100rpx;
				}
			}
			
		}
	}
	.houselist-content{
		width: 100%;
		// padding: 0 10rpx;
		margin-top: 20rpx;
		.houselist-head{
			display: flex;
			align-items: center;
			.househead-item{
				margin-right: 10rpx;
				font-size: 35rpx;
				color: #000000;
				font-weight:400 ;
			}
			.selectH{
				font-size: 40rpx;
				color:#36bdee ;
			}
		}
		.houselist{
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
			width: 730rpx;
      padding: 0 10rpx;
      
			.houselist-item{
				width: 350rpx;
			}
      
		}
    .houselist view:nth-child(odd) {
      margin-right: 20rpx;
    }
	}
</style>
